import React, { useState, useEffect } from 'react';
import {
  Input,
  Button,
  Card,
  Tag,
  Modal,
  Pagination,
  Row,
  Col,
  Divider,
  Space,
  message
} from 'antd';
import {
  HeartOutlined,
  DownloadOutlined,
  SearchOutlined,
  CloseCircleOutlined,
  ShareAltOutlined
} from '@ant-design/icons';

const { Search } = Input;

const PromptSquare = () => {
  const [activeTab, setActiveTab] = useState('latest');
  const [activeCategory, setActiveCategory] = useState('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectedPrompt, setSelectedPrompt] = useState(null);
  const [isShareModalVisible, setIsShareModalVisible] = useState(false);

  // 每页显示数量
  const pageSize = 9;

  // 提示词数据 - 完全按照图片中的内容
  const allPrompts = [
    {
      id: 1,
      title: '博客文章写作助手',
      description: '根据主题自动生成结构化的博客文章，包含引言、正文和结论。',
      tags: ['写作', '博客', '营销'],
      category: 'writing',
      author: 'ContentPro',
      likes: 128,
      downloads: 432,
      createdAt: '2023-05-15',
      content: `请根据以下主题生成一篇结构完整的博客文章，包含引言、正文和结论部分。\n\n主题: [在此输入主题]\n目标读者: [在此输入目标读者]\n文章风格: [正式/轻松/专业/幽默等]\n字数要求: [在此输入字数]\n关键词: [在此输入关键词，用逗号分隔]\n\n要求:\n1. 引言部分要吸引读者注意\n2. 正文部分要有逻辑地展开主题\n3. 结论部分要总结要点并给出行动建议\n4. 适当使用小标题和段落分隔\n5. 保持语言风格一致`
    },
    {
      id: 2,
      title: '产品描述优化器',
      description: '将简单的产品信息转化为吸引人的产品描述，强调特点和好处。',
      tags: ['电商', '营销', '销售'],
      category: 'marketing',
      author: 'E-CommerceGuru',
      likes: 95,
      downloads: 320,
      createdAt: '2023-06-20',
      content: `请将以下产品信息转化为一段引人注目的产品描述。描述应该突出产品的主要特点和好处，并使用吸引人的语言来吸引目标受众。\n\n产品名称: [产品名称]\n产品类型: [产品类型]\n主要特点:\n- [特点1]\n- [特点2]\n- [特点3]\n\n目标受众: [目标受众]\n价格区间: [价格]\n独特卖点: [独特卖点]\n\n描述应包含:\n1. 引人注目的开头\n2. 产品的主要特点和好处\n3. 为什么顾客应该购买这个产品\n4. 有效的号召性用语\n\n描述风格: [正式/随意/专业/有趣/奢华等]\n字数限制: [字数]`
    },
    {
      id: 3,
      title: '代码解释器',
      description: '解释复杂的代码片段，说明其功能、用途和可能的优化方向。',
      tags: ['编程', '开发', '教育'],
      category: 'programming',
      author: 'CodeMaster',
      likes: 211,
      downloads: 567,
      createdAt: '2023-04-10',
      content: `请解释以下代码片段的功能、用途和可能的优化方向。\n\n代码片段:\n[在此粘贴代码]\n\n解释要求:\n1. 说明代码的整体功能\n2. 逐行或逐段解释关键部分\n3. 指出可能的性能问题或改进空间\n4. 建议优化方案\n5. 提供替代实现思路(如果有)`
    },
    {
      id: 4,
      title: '数据分析报告生成器',
      description: '将原始数据转化为结构化的分析报告，包含图表描述和关键见解。',
      tags: ['数据', '分析', '报告'],
      category: 'data',
      author: 'DataWizard',
      likes: 87,
      downloads: 245,
      createdAt: '2023-07-05',
      content: `请根据以下数据生成一份结构化的分析报告。\n\n数据集描述:\n[描述数据集来源和内容]\n\n分析要求:\n1. 关键指标统计\n2. 数据趋势分析\n3. 异常值检测\n4. 可视化建议(图表类型)\n5. 业务见解和建议\n\n报告格式:\n1. 执行摘要\n2. 分析方法\n3. 主要发现\n4. 结论和建议\n5. 附录(可选)`
    },
    {
      id: 5,
      title: '社交媒体内容创作助手',
      description: '为不同社交平台生成吸引人的内容，根据平台特点优化格式和语调。',
      tags: ['社交媒体', '内容创作', '营销'],
      category: 'marketing',
      author: 'SocialMediaPro',
      likes: 154,
      downloads: 487,
      createdAt: '2023-03-18',
      content: `请为指定的社交媒体平台创建吸引人的内容。\n\n平台: [Facebook/Twitter/Instagram/LinkedIn等]\n主题: [内容主题]\n目标受众: [目标受众描述]\n内容类型: [帖子/故事/视频/直播等]\n语气: [专业/轻松/幽默/激励等]\n\n要求:\n1. 根据平台特点优化内容格式\n2. 使用适当的标签和提及\n3. 包含吸引人的标题或开场\n4. 添加行动号召\n5. 建议最佳发布时间(可选)`
    },
    {
      id: 6,
      title: '研究总结工具',
      description: '将学术论文和研究文章转化为简明的摘要，突出关键发现和方法。',
      tags: ['学术', '研究', '总结'],
      category: 'education',
      author: 'ResearchHelper',
      likes: 76,
      downloads: 198,
      createdAt: '2023-02-28',
      content: `请将以下研究文章转化为简明摘要。\n\n文章标题: [文章标题]\n作者: [作者]\n发表信息: [期刊/会议，年份]\n\n摘要要求:\n1. 研究背景和目的\n2. 使用的方法论\n3. 关键发现和结果\n4. 研究意义和影响\n5. 局限性和未来研究方向\n\n格式:\n- 保持客观中立\n- 避免专业术语(如必要请解释)\n- 字数限制: [字数]`
    },
    {
      id: 7,
      title: '商业计划书生成器',
      description: '根据商业概念自动生成结构化的商业计划书框架。',
      tags: ['商业', '创业', '计划'],
      category: 'business',
      author: 'BizPlanner',
      likes: 112,
      downloads: 356,
      createdAt: '2023-01-15',
      content: `请根据以下商业概念生成商业计划书框架。\n\n商业名称: [名称]\n核心产品/服务: [描述]\n目标市场: [描述]\n竞争优势: [描述]\n\n计划书要求:\n1. 执行摘要\n2. 公司描述\n3. 市场分析\n4. 组织与管理\n5. 服务或产品线\n6. 营销与销售\n7. 资金需求\n8. 财务预测\n\n格式要求:\n- 专业商务风格\n- 包含必要的图表和附录`
    },
    {
      id: 8,
      title: 'UI设计规范生成器',
      description: '根据品牌风格生成UI设计规范和组件库文档。',
      tags: ['设计', 'UI', '规范'],
      category: 'design',
      author: 'UIDesignPro',
      likes: 143,
      downloads: 421,
      createdAt: '2023-06-22',
      content: `请根据以下品牌风格生成UI设计规范。\n\n品牌名称: [名称]\n主色调: [色值]\n辅助色: [色值]\n字体: [字体名称]\n品牌风格: [简约/活力/专业/奢华等]\n\n规范要求:\n1. 色彩系统\n2. 排版规范\n3. 按钮和交互组件\n4. 表单元素\n5. 图标使用指南\n6. 间距和布局\n7. 响应式设计规则\n\n输出格式:\n- 包含示例和代码片段\n- 提供可复用的设计组件`
    },
    {
      id: 9,
      title: '创意写作助手',
      description: '激发创意写作灵感，提供情节发展和角色塑造建议。',
      tags: ['创意', '写作', '故事'],
      category: 'creative',
      author: 'StoryTeller',
      likes: 98,
      downloads: 287,
      createdAt: '2023-05-30',
      content: `请为以下创意写作提供灵感和建议。\n\n作品类型: [小说/短篇故事/剧本等]\n题材: [奇幻/科幻/爱情/悬疑等]\n当前进度: [简要描述已写内容]\n\n需求:\n1. 情节发展建议\n2. 角色塑造建议\n3. 冲突和转折点\n4. 世界观构建\n5. 对话风格建议\n\n特别要求:\n- 避免陈词滥调\n- 保持风格一致性\n- 提供多个可选方向`
    },
    {
      id: 10,
      title: '教育课程大纲生成器',
      description: '根据学科和教学目标生成结构化的课程大纲。',
      tags: ['教育', '课程', '大纲'],
      category: 'education',
      author: 'EduDesigner',
      likes: 67,
      downloads: 189,
      createdAt: '2023-04-05',
      content: `请根据以下教学需求生成课程大纲。\n\n课程名称: [名称]\n学科领域: [领域]\n目标学生: [描述]\n课时: [总课时]\n教学目标: [列出主要目标]\n\n大纲要求:\n1. 课程简介\n2. 每周主题和内容\n3. 学习活动设计\n4. 评估方法\n5. 推荐阅读材料\n\n格式要求:\n- 明确学习目标和成果\n- 包含时间分配建议\n- 提供多样化教学活动`
    },
    {
      id: 11,
      title: '求职信优化器',
      description: '根据简历和职位描述生成个性化的求职信。',
      tags: ['求职', '简历', '职业'],
      category: 'business',
      author: 'CareerHelper',
      likes: 134,
      downloads: 398,
      createdAt: '2023-03-12',
      content: `请根据以下信息生成优化的求职信。\n\n求职者姓名: [姓名]\n申请职位: [职位名称]\n公司名称: [公司]\n简历摘要: [简要描述经验和技能]\n职位要求: [粘贴职位描述]\n\n要求:\n1. 专业格式\n2. 突出匹配的技能和经验\n3. 展示对公司了解\n4. 强有力的开场和结尾\n5. 保持一页长度\n\n风格:\n- 正式但不死板\n- 展示个性但不随意\n- 量化成就`
    },
    {
      id: 12,
      title: '多语言翻译优化器',
      description: '优化机器翻译结果，使其更自然符合目标语言习惯。',
      tags: ['翻译', '语言', '优化'],
      category: 'creative',
      author: 'LinguaMaster',
      likes: 89,
      downloads: 276,
      createdAt: '2023-02-18',
      content: `请优化以下机器翻译内容。\n\n原文语言: [语言]\n目标语言: [语言]\n原文内容: [粘贴原文]\n机器翻译结果: [粘贴翻译]\n\n优化要求:\n1. 修正不自然的表达\n2. 确保术语一致性\n3. 符合目标语言文化习惯\n4. 保持原文风格和语气\n5. 检查语法和标点\n\n注意事项:\n- 保留原文意思\n- 不添加未明确的内容\n- 标记不确定的翻译`
    }
  ];

  // 分类数据
  const categories = [
    { id: 'all', name: '全部' },
    { id: 'writing', name: '写作' },
    { id: 'programming', name: '编程' },
    { id: 'design', name: '设计' },
    { id: 'marketing', name: '营销' },
    { id: 'education', name: '教育' },
    { id: 'data', name: '数据分析' },
    { id: 'creative', name: '创意' },
    { id: 'business', name: '商业' }
  ];

  // 筛选和排序提示词
  const getFilteredPrompts = () => {
    let filtered = [...allPrompts];

    // 按分类筛选
    if (activeCategory !== 'all') {
      filtered = filtered.filter(prompt => prompt.category === activeCategory);
    }

    // 按搜索词筛选
    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(prompt =>
        prompt.title.toLowerCase().includes(query) ||
        prompt.description.toLowerCase().includes(query) ||
        prompt.tags.some(tag => tag.toLowerCase().includes(query)) ||
        prompt.author.toLowerCase().includes(query)
      );
    }

    // 排序
    if (activeTab === 'latest') {
      filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
    } else if (activeTab === 'popular') {
      filtered.sort((a, b) => (b.likes + b.downloads) - (a.likes + a.downloads));
    }

    return filtered;
  };

  const filteredPrompts = getFilteredPrompts();

  // 分页数据
  const paginatedPrompts = filteredPrompts.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  // 重置页码当筛选条件变化时
  useEffect(() => {
    setCurrentPage(1);
  }, [activeCategory, activeTab, searchQuery]);

  const handlePreview = (prompt) => {
    setSelectedPrompt(prompt);
    setIsModalVisible(true);
  };

  const handleUse = (prompt) => {
    navigator.clipboard.writeText(prompt.content)
      .then(() => {
        message.success(`"${prompt.title}"提示词已复制到剪贴板`);
      })
      .catch(() => {
        message.info('请手动复制提示词内容');
      });
  };

  const handleShare = () => {
    setIsShareModalVisible(true);
  };

  const handleShareSubmit = () => {
    setIsShareModalVisible(false);
    message.success('感谢分享您的提示词！我们会尽快审核。');
  };

  return (
    <div style={{
      width: '100%',
      minHeight: '100vh',
      padding: '1px',
      backgroundColor: '#fff'
    }}>
      <div style={{
        maxWidth: 1400,
        margin: '0 auto',
        backgroundColor: '#fff',
        borderRadius: 12,
        padding: 1,
      }}>
        {/* 标题区域 */}
        <div style={{ marginBottom: 24 }}>
          <h1 style={{ fontSize: 28, fontWeight: 600, marginBottom: 8 }}>提示词广场</h1>
          <p style={{ color: '#666' }}>发现和分享高质量的AI提示词，助力您的创作和工作。</p>
        </div>

        {/* 搜索和筛选区域 */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 16,
          padding: '16px 0',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <div style={{ display: 'flex', gap: 16 }}>
            <Search
              placeholder="搜索提示词模板..."
              prefix={<SearchOutlined />}
              allowClear={{ clearIcon: <CloseCircleOutlined /> }}
              style={{ flex: 1 }}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
            <Space>
              <Button
                type={activeTab === 'latest' ? 'primary' : 'default'}
                onClick={() => setActiveTab('latest')}
                style={activeTab === 'latest' ? { backgroundColor: '#722ED1', borderColor: '#722ED1' } : {}}
              >
                最新
              </Button>
              <Button
                type={activeTab === 'popular' ? 'primary' : 'default'}
                onClick={() => setActiveTab('popular')}
                style={activeTab === 'popular' ? { backgroundColor: '#722ED1', borderColor: '#722ED1' } : {}}
              >
                热门
              </Button>
              <Button
                type="primary"
                style={{ backgroundColor: '#722ED1', borderColor: '#722ED1' }}
                onClick={handleShare}
                icon={<ShareAltOutlined />}
              >
                分享我的提示词
              </Button>
            </Space>
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {categories.map(category => (
              <Button
                key={category.id}
                type={activeCategory === category.id ? 'primary' : 'default'}
                style={activeCategory === category.id ? {
                  backgroundColor: '#722ED1',
                  borderColor: '#722ED1'
                } : {}}
                onClick={() => setActiveCategory(category.id)}
              >
                {category.name}
              </Button>
            ))}
          </div>
        </div>

        {/* 提示词卡片列表 - 3列网格 */}
        {paginatedPrompts.length > 0 ? (
          <Row gutter={[24, 24]} style={{ margin: '24px 0' }}>
            {paginatedPrompts.map(prompt => (
              <Col xs={24} sm={12} lg={8} key={prompt.id}>
                <Card
                  hoverable
                  style={{ borderRadius: 12, height: '100%' }}
                  bodyStyle={{
                    padding: 20,
                    height: '100%',
                    display: 'flex',
                    flexDirection: 'column'
                  }}
                >
                  <div style={{ flex: 1 }}>
                    <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 12 }}>{prompt.title}</h3>
                    <p style={{ color: '#666', marginBottom: 16 }}>{prompt.description}</p>

                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
                      {prompt.tags.map(tag => (
                        <Tag
                          key={tag}
                          style={{
                            backgroundColor: '#F9F0FF',
                            color: '#722ED1',
                            borderRadius: 12,
                            padding: '2px 8px',
                            fontSize: 12
                          }}
                        >
                          {tag}
                        </Tag>
                      ))}
                    </div>

                    <div style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      color: '#888',
                      fontSize: 14
                    }}>
                      <span>作者: {prompt.author}</span>
                      <div style={{ display: 'flex', gap: 16 }}>
                        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                          <HeartOutlined style={{ color: '#FF4D4F' }} /> {prompt.likes}
                        </span>
                        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                          <DownloadOutlined style={{ color: '#1890FF' }} /> {prompt.downloads}
                        </span>
                      </div>
                    </div>
                  </div>

                  <Divider style={{ margin: '16px 0' }} />

                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between'
                  }}>
                    <Button onClick={() => handlePreview(prompt)}>预览</Button>
                    <Button
                      type="primary"
                      style={{ backgroundColor: '#722ED1', borderColor: '#722ED1' }}
                      onClick={() => handleUse(prompt)}
                    >
                      使用
                    </Button>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        ) : (
          <div style={{
            textAlign: 'center',
            padding: '40px 0',
            color: '#999'
          }}>
            没有找到匹配的提示词，请尝试其他搜索条件
          </div>
        )}

        {/* 分页 */}
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          marginTop: 32
        }}>
          <Pagination
            current={currentPage}
            total={filteredPrompts.length}
            pageSize={pageSize}
            onChange={(page) => setCurrentPage(page)}
            showSizeChanger={false}
            showQuickJumper
            itemRender={(page, type, originalElement) => {
              if (type === 'prev') {
                return <Button disabled={currentPage === 1}>上一页</Button>;
              }
              if (type === 'next') {
                return <Button disabled={currentPage * pageSize >= filteredPrompts.length}>下一页</Button>;
              }
              if (type === 'page') {
                return (
                  <Button
                    type={page === currentPage ? 'primary' : 'default'}
                    style={page === currentPage ? {
                      backgroundColor: '#722ED1',
                      borderColor: '#722ED1'
                    } : {}}
                  >
                    {page}
                  </Button>
                );
              }
              return originalElement;
            }}
          />
        </div>
      </div>

      {/* 预览模态框 */}
      <Modal
        title={selectedPrompt?.title || '提示词详情'}
        open={isModalVisible}
        onCancel={() => setIsModalVisible(false)}
        footer={[
          <Button key="back" onClick={() => setIsModalVisible(false)}>
            关闭
          </Button>,
          <Button
            key="use"
            type="primary"
            style={{ backgroundColor: '#722ED1', borderColor: '#722ED1' }}
            onClick={() => {
              setIsModalVisible(false);
              handleUse(selectedPrompt);
            }}
          >
            使用
          </Button>,
        ]}
        width={800}
      >
        {selectedPrompt && (
          <div>
            <p>{selectedPrompt.description}</p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, margin: '16px 0' }}>
              {selectedPrompt.tags.map(tag => (
                <Tag
                  key={tag}
                  style={{
                    backgroundColor: '#F9F0FF',
                    color: '#722ED1',
                    borderRadius: 12,
                    padding: '2px 8px',
                    fontSize: 12
                  }}
                >
                  {tag}
                </Tag>
              ))}
            </div>

            <Divider />

            <div style={{
              backgroundColor: '#f5f5f5',
              padding: 16,
              borderRadius: 4,
              marginBottom: 16
            }}>
              <pre style={{
                whiteSpace: 'pre-wrap',
                margin: 0,
                fontFamily: 'inherit'
              }}>
                {selectedPrompt.content}
              </pre>
            </div>

            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              color: '#888',
              fontSize: 14
            }}>
              <span>作者: {selectedPrompt.author}</span>
              <div style={{ display: 'flex', gap: 16 }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                  <HeartOutlined style={{ color: '#FF4D4F' }} /> {selectedPrompt.likes}
                </span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                  <DownloadOutlined style={{ color: '#1890FF' }} /> {selectedPrompt.downloads}
                </span>
              </div>
            </div>
          </div>
        )}
      </Modal>

      {/* 分享提示词模态框 */}
      <Modal
        title="分享您的提示词"
        open={isShareModalVisible}
        onCancel={() => setIsShareModalVisible(false)}
        footer={[
          <Button key="back" onClick={() => setIsShareModalVisible(false)}>
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            style={{ backgroundColor: '#722ED1', borderColor: '#722ED1' }}
            onClick={handleShareSubmit}
          >
            提交分享
          </Button>,
        ]}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Input placeholder="提示词标题" />
          <Input.TextArea
            placeholder="提示词内容"
            autoSize={{ minRows: 6 }}
          />
          <Input placeholder="标签（用逗号分隔）" />
          <Input placeholder="您的名称（可选）" />
        </div>
      </Modal>
    </div>
  );
};

export default PromptSquare;
